<template>
  <div>
    <navs/>
    <div class="content-wrap">
      <div class="content">
        <div class="steps">
          <ul class="clearfix">
            <li>
             <a href="javascript:" class="link router-link-exact-active">
                <em>1</em>
                <span>第一步, 项目类型</span>
              </a>
            </li>
            <li>
              <a href="javascript:" class="link router-link-exact-active">
                <em>2</em>
                <span>第二步, 功能评估</span>
              </a>
            </li>
            <li>
              <a href="javascript:" class="link router-link-exact-active">
                <em>3</em>
                <span>第三步, 计算结果</span>
              </a>
            </li>
          </ul>
        </div>
        <router-view></router-view>

      </div>
    </div>
    <footers/>
  </div>
</template>

<script>
  import navs from '../components/nav'
  import footers from '../components/footer'
  export default {
    name: 'quote',
    data() {
      return {

      }
    },
    components: {
      navs,
      footers
    }
  }
</script>

<style scoped>
  .content-wrap {
    padding-bottom: 26px;
    min-height: 727px;
    background: #f0f2f5;
    /* margin-bottom: 155px; */
  }
  .content .steps {
    width: 100%;
    background: #fff;
    padding: 2.5rem .9rem;
    box-sizing: border-box;
  }
  .content .steps ul {
    max-width: 980px;
    margin: 0 auto;
  }
  .steps li {
    position: relative;
    display: inline-block;
    width: calc((100% - 2 * 1.7rem) / 3);
    height: 4rem;

  }
  .steps li .link {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 1.2rem 0 1.2rem 1.5rem;
    box-sizing: border-box;
    margin-right: 1.1rem;
    border-radius: .4rem;
    float: left;
    font-size: 1rem;
    line-height: 1.6rem;
    color: hsla(0,0%,100%,.8);
    background-color: rgba(137,150,166,.5);
    cursor: pointer;
  }
  .steps li:before {
    content: "";
    position: absolute;
    width: .9rem;
    height: 100%;
    background: url('../assets/img/quote_right.png') no-repeat;
    background-size: 100%;
    left: 3.4rem;
    top: 0;
  }
  .steps li em {
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    position: absolute;
  }
  .steps li span {
    padding-left: 3.8rem;
  }
  .steps li .router-link-active{
    background: #4289db;
  }

</style>
